<template>
  <view class="orderlist-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="navbar-title">订单列表</view>
      <view class="navbar-right">
        <u-icon name="more-dot-fill" size="20" color="#333" @click="showMoreOptions"></u-icon>
        <u-icon name="minus" size="20" color="#333" @click="minimize"></u-icon>
        <u-icon name="target" size="20" color="#333" @click="showTarget"></u-icon>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-section">
      <u-search
        v-model="searchKeyword"
        placeholder="输入商品名称搜索"
        :show-action="false"
        :clearabled="true"
        bg-color="#f5f5f5"
        shape="round"
        @search="handleSearch"
      ></u-search>
    </view>

    <!-- 状态标签页 -->
    <view class="tab-section">
      <u-tabs
        :list="tabList"
        :current="currentTab"
        @change="handleTabChange"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        :bar-width="30"
        :bar-height="3"
        :bar-color="barColor"
        :font-size="28"
        :item-width="120"
      ></u-tabs>
    </view>

    <!-- 订单列表内容 -->
    <view class="order-content">
      <!-- 空状态 -->
      <view class="empty-state" v-if="orderList.length === 0">
        <view class="empty-illustration">
          <!-- 背景文档图标 -->
          <view class="document-bg">
            <view class="doc-lines">
              <view class="line line1"></view>
              <view class="line line2"></view>
              <view class="line line3"></view>
            </view>
          </view>
          <!-- 人物图标 -->
          <view class="person">
            <view class="head"></view>
            <view class="body">
              <view class="top"></view>
              <view class="pants"></view>
            </view>
            <view class="ladder">
              <view class="ladder-left"></view>
              <view class="ladder-right"></view>
              <view class="ladder-step1"></view>
              <view class="ladder-step2"></view>
            </view>
            <view class="paint-roller"></view>
          </view>
          <!-- 装饰植物 -->
          <view class="plant plant-left"></view>
          <view class="plant plant-right"></view>
        </view>
        <view class="empty-text">这里还没有相关订单~</view>
      </view>

      <!-- 订单列表 -->
      <view class="order-list" v-else>
        <view 
          class="order-item" 
          v-for="(order, index) in orderList" 
          :key="index"
          @click="viewOrderDetail(order)"
        >
          <!-- 订单头部 - 店铺信息和订单状态 -->
          <view class="order-header">
            <view class="shop-info">
              <u-icon name="shopping-cart" size="16" color="#333"></u-icon>
              <text class="shop-name">{{order.shopName}}</text>
            </view>
            <view class="order-status" :class="[getStatusClass(order.status)]">
              <text>{{getStatusText(order.status)}}</text>
            </view>
          </view>
          
          <!-- 订单商品信息 -->
          <view class="order-goods">
            <image class="goods-image" :src="order.goodsImage" mode="aspectFill"></image>
            <view class="goods-info">
              <view class="goods-name">{{order.goodsName}}</view>
              <view class="goods-spec">{{order.goodsSpec}}</view>
              <view class="goods-price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{order.price}}</text>
                <text class="goods-count">x{{order.count}}</text>
              </view>
            </view>
          </view>
          
          <!-- 订单底部 - 操作按钮 -->
          <view class="order-footer">
            <view class="order-total">
              共{{order.totalCount}}件商品 合计：¥{{order.totalAmount}}
            </view>
            <view class="order-actions">
              <u-button 
                v-if="order.status === 'pending_payment'" 
                type="primary" 
                size="mini" 
                @click="handlePayment(order)"
              >立即付款</u-button>
              <u-button 
                v-if="order.status === 'pending_shipment'" 
                type="info" 
                size="mini" 
                @click="checkLogistics(order)"
              >查看物流</u-button>
              <u-button 
                v-if="order.status === 'pending_receipt'" 
                type="success" 
                size="mini" 
                @click="confirmReceipt(order)"
              >确认收货</u-button>
              <u-button 
                v-if="order.status === 'completed'" 
                type="warning" 
                size="mini" 
                @click="writeReview(order)"
              >评价</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'OrderList',
  data() {
    return {
      searchKeyword: '',
      currentTab: 0,
      activeColor: '#ff4444',
      inactiveColor: '#666666',
      barColor: '#ff4444',
      tabList: [
        { name: '全部' },
        { name: '待付款' },
        { name: '待发货' },
        { name: '待收货' },
        { name: '已完成' }
      ],
      orderList: [], // 订单列表
      loading: false
    }
  },
  onLoad(options) {
    // 页面加载时的逻辑
    this.loadOrders()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 显示更多选项
    showMoreOptions() {
      uni.showActionSheet({
        itemList: ['刷新', '设置', '帮助'],
        success: (res) => {
          console.log('选择了第' + (res.tapIndex + 1) + '个选项')
        }
      })
    },
    
    // 最小化
    minimize() {
      console.log('最小化')
    },
    
    // 显示目标
    showTarget() {
      console.log('显示目标')
    },
    
    // 搜索处理
    handleSearch(value) {
      console.log('搜索关键词:', value)
      this.searchKeyword = value
      this.loadOrders()
    },
    
    // 标签页切换
    handleTabChange(index) {
      this.currentTab = index
      this.loadOrders()
    },
    
    // 加载订单数据
    loadOrders() {
      this.loading = true
      // 模拟API调用
      setTimeout(() => {
        // 根据当前标签页筛选订单
        this.orderList = this.getMockOrders()
        this.loading = false
      }, 500)
    },
    
    // 获取模拟订单数据
    getMockOrders() {
      const mockOrders = [
        {
          id: '1',
          shopName: '官方旗舰店',
          status: 'pending_payment',
          goodsName: '时尚休闲运动鞋',
          goodsSpec: '颜色：白色；尺码：42',
          goodsImage: '/static/first/product1.png',
          price: '299.00',
          count: 1,
          totalCount: 1,
          totalAmount: '299.00'
        },
        {
          id: '2',
          shopName: '品牌专卖店',
          status: 'pending_shipment',
          goodsName: '经典款牛仔裤',
          goodsSpec: '颜色：蓝色；尺码：L',
          goodsImage: '/static/first/product1.png',
          price: '199.00',
          count: 2,
          totalCount: 2,
          totalAmount: '398.00'
        }
      ]
      
      // 根据当前标签页筛选
      if (this.currentTab === 0) {
        return mockOrders
      } else if (this.currentTab === 1) {
        return mockOrders.filter(order => order.status === 'pending_payment')
      } else if (this.currentTab === 2) {
        return mockOrders.filter(order => order.status === 'pending_shipment')
      } else if (this.currentTab === 3) {
        return mockOrders.filter(order => order.status === 'pending_receipt')
      } else if (this.currentTab === 4) {
        return mockOrders.filter(order => order.status === 'completed')
      }
      
      return []
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        'pending_payment': 'status-pending',
        'pending_shipment': 'status-shipping',
        'pending_receipt': 'status-delivery',
        'completed': 'status-completed'
      }
      return statusMap[status] || ''
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending_payment': '待付款',
        'pending_shipment': '待发货',
        'pending_receipt': '待收货',
        'completed': '已完成'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 查看订单详情
    viewOrderDetail(order) {
      console.log('查看订单详情:', order)
      // 跳转到订单详情页
      // uni.navigateTo({
      //   url: `/pages/order-detail/order-detail?id=${order.id}`
      // })
    },
    
    // 处理付款
    handlePayment(order) {
      console.log('处理付款:', order)
      uni.showModal({
        title: '确认付款',
        content: `确认支付 ¥${order.totalAmount} 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 调用支付接口
            console.log('用户确认付款')
          }
        }
      })
    },
    
    // 查看物流
    checkLogistics(order) {
      console.log('查看物流:', order)
      // 跳转到物流页面
    },
    
    // 确认收货
    confirmReceipt(order) {
      console.log('确认收货:', order)
      uni.showModal({
        title: '确认收货',
        content: '确认已收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用确认收货接口
            console.log('用户确认收货')
          }
        }
      })
    },
    
    // 写评价
    writeReview(order) {
      console.log('写评价:', order)
      // 跳转到评价页面
    }
  }
}
</script>

<style lang="scss" scoped>
.orderlist-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .navbar-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .navbar-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
  }
  
  .navbar-right {
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .u-icon {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.search-section {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
}

.tab-section {
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}

.order-content {
  flex: 1;
  padding: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-illustration {
    position: relative;
    width: 400rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
    
    .document-bg {
      position: absolute;
      left: 50rpx;
      top: 50rpx;
      width: 200rpx;
      height: 150rpx;
      background-color: #e0e0e0;
      border-radius: 20rpx;
      transform: perspective(100rpx) rotateX(15deg) rotateY(-5deg);
      
      .doc-lines {
        padding: 30rpx 20rpx;
        
        .line {
          height: 8rpx;
          background-color: #b0b0b0;
          margin-bottom: 15rpx;
          border-radius: 4rpx;
          
          &.line1 { width: 80%; }
          &.line2 { width: 60%; }
          &.line3 { width: 90%; }
        }
      }
    }
    
    .person {
      position: absolute;
      right: 80rpx;
      top: 80rpx;
      
      .head {
        width: 40rpx;
        height: 40rpx;
        background-color: #8b4513;
        border-radius: 50%;
        margin-bottom: 10rpx;
      }
      
      .body {
        .top {
          width: 60rpx;
          height: 40rpx;
          background-color: #ff8c00;
          border-radius: 20rpx;
          margin-bottom: 10rpx;
        }
        
        .pants {
          width: 50rpx;
          height: 60rpx;
          background-color: #696969;
          border-radius: 20rpx;
        }
      }
      
      .ladder {
        position: absolute;
        left: -20rpx;
        top: 60rpx;
        
        .ladder-left, .ladder-right {
          position: absolute;
          width: 8rpx;
          height: 80rpx;
          background-color: #8b4513;
        }
        
        .ladder-left { left: 0; }
        .ladder-right { right: 0; }
        
        .ladder-step1, .ladder-step2 {
          position: absolute;
          width: 60rpx;
          height: 8rpx;
          background-color: #8b4513;
        }
        
        .ladder-step1 { top: 20rpx; }
        .ladder-step2 { top: 50rpx; }
      }
      
      .paint-roller {
        position: absolute;
        right: -30rpx;
        top: 40rpx;
        width: 60rpx;
        height: 20rpx;
        background-color: #4169e1;
        border-radius: 10rpx;
      }
    }
    
    .plant {
      position: absolute;
      bottom: 0;
      width: 40rpx;
      height: 60rpx;
      background: linear-gradient(to top, #228b22, #32cd32);
      border-radius: 20rpx;
      
      &.plant-left { left: 60rpx; }
      &.plant-right { right: 80rpx; }
    }
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }
}

.order-list {
  .order-item {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .shop-info {
        display: flex;
        align-items: center;
        gap: 10rpx;
        
        .shop-name {
          font-size: 28rpx;
          color: #333333;
        }
      }
      
      .order-status {
        font-size: 24rpx;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        
        &.status-pending {
          background-color: #fff2e8;
          color: #ff6b35;
        }
        
        &.status-shipping {
          background-color: #e6f7ff;
          color: #1890ff;
        }
        
        &.status-delivery {
          background-color: #f6ffed;
          color: #52c41a;
        }
        
        &.status-completed {
          background-color: #f0f0f0;
          color: #666666;
        }
      }
    }
    
    .order-goods {
      display: flex;
      gap: 20rpx;
      margin-bottom: 20rpx;
      
      .goods-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        background-color: #f5f5f5;
      }
      
      .goods-info {
        flex: 1;
        
        .goods-name {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 10rpx;
          line-height: 1.4;
        }
        
        .goods-spec {
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 15rpx;
        }
        
        .goods-price {
          display: flex;
          align-items: center;
          gap: 10rpx;
          
          .price-symbol {
            font-size: 24rpx;
            color: #ff4444;
          }
          
          .price-value {
            font-size: 32rpx;
            font-weight: 600;
            color: #ff4444;
          }
          
          .goods-count {
            font-size: 24rpx;
            color: #999999;
            margin-left: auto;
          }
        }
      }
    }
    
    .order-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;
      
      .order-total {
        font-size: 24rpx;
        color: #666666;
      }
      
      .order-actions {
        display: flex;
        gap: 15rpx;
      }
    }
  }
}
</style>